// 指标字典
import { defineComponent } from 'vue';
import './index.scss';
import Img_1 from '@/assets/images/header_img_1.svg';
import Img_2 from '@/assets/images/header_img_2.svg';
import Img_3 from '@/assets/images/header_img_3.svg';
import Img_4 from '@/assets/images/header_img_4.svg'; //
import Img_5 from '@/assets/images/header_img_5.svg'; //
import Img_6 from '@/assets/images/header_img_6.svg'; //
import Bg1 from '@/assets/images/bg_1.svg'; //
import Bg2 from '@/assets/images/bg_2.svg'; //

// const Img_1 = require('@/assets/images/header_img_1.svg');
const IndexDirectionary = defineComponent({
  name: 'SystemSetting',
  props: {},
  setup: (props, { slots, attrs, emit }) => {
    return () => {
      return (
        <div class="index-dictionary-wrap">
          <div class="top-banner-wrap">
            <div class="left">
              <div class="header-title">Hi，欢迎使用指标字典！</div>
              <div class="header-subtitle">指标信息即查即得</div>
              <p class="header-content">
                指标字典是嵌入到第三方应用平台（系统）的工具组件，实现了指标平台与第三方平台指标信息的相互引用，展现了指标平台与第三方平台打通的能力。通过指标字典，用户可以方便快速了解第三方平台指标的业务含义及计算逻辑，从而获得更多的数据洞察力，为运营决策提供数据支撑。
              </p>
            </div>
            <div class="right">
              <div class="img-wrap">
                <img src={Img_1} alt="" />
              </div>
            </div>
          </div>
          <div class="main-content-wrap">
            <div class="content">
              <div class="segment-one">
                <div class="title">两个页面三大功能</div>
                <div class="content">
                  <img src={Bg1} alt="" class="bg-left" />
                  指标字典包含"指标字典首页"、"指标详情页"两个页面，涵盖"快捷搜索框"、"热点搜索榜"、"元信息展示"三大功能模块。
                  <div style={{ marginTop: '26px' }} class="point-hand-wrap">
                    <img src={Img_2} />
                    <img src={Img_3} alt="" class="point-hand" />
                  </div>
                </div>
              </div>
              <div class="segment-two">
                <div class="content">
                  <div class="left">
                    <img src={Bg2} alt="" class="bg2" />
                    <div class="title">指标字典首页</div>
                    <div class="seg2-content">
                      指标字典通过悬浮按钮以系统间接口调用的方式实现首页在第三方平台的展示，支持用户查询指标平台中已发布的全部指标；指标字典首页由
                      "快捷搜索框"、"热点搜索榜" 两大功能点组成：
                    </div>
                    <div class="list-item">
                      快捷搜索框：实现指标的全局搜索，是浏览指标详情页的一个重要入口
                    </div>
                    <div class="list-item">
                      热点搜索榜：展示搜索指标的TOPN及对应的热度值；同时也是用户浏览热门指标详情页的一个入口
                    </div>
                  </div>
                  <div class="right">
                    <img src={Img_4} alt="" />
                  </div>
                </div>
              </div>
              <div class="segment-three">
                <div class="content">
                  <div class="row row-one">
                    <img src={Img_5} alt="" />
                    <img src={Img_3} alt="" class="point-hand" />
                  </div>
                  <div class="row row-two">
                    <div class="left">
                      <div class="title">指标详情页</div>
                      <div class="detail">
                        指标字典也可以通过指标详情页的直接调用，实现单指标关键元信息展示，从而可以快速了解指标口径、定位相关负责人及关联的报表；该页面主要包括
                        "快捷搜索框"、"元信息展示" 两大功能点：
                      </div>
                      <div class="list-wrap">
                        <div class="list-item">
                          快捷搜索框：实现指标全局搜索，可重复搜索指标
                        </div>
                        <div class="list-item">元信息展示：</div>
                        <div class="list-item-sub">
                          <div class="item">
                            a. 基本信息：展示指标业务负责人、研发负责人等
                          </div>
                          <div class="item">
                            b.
                            指标口径：通过业务含义、计算公式、备注信息确定指标口径
                          </div>
                          <div class="item">
                            c.
                            应用信息：展示指标绑定的所有报表，且点击后可跳转到对应的报表界面
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="right">
                      <img src={Img_6} alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    };
  }
});

export default IndexDirectionary;
